<template>
  <div>
    <div class="lanmu">
      <p>{{lanmuText}}</p>
      <ul class="lanmu_item" v-if="lanmuText=='点击添加以下频道'">
        <li v-for="(item,index) in addlist" :key="index" @click="addLanmu(item,index)">
          <a href="javascript:;">{{item.name}}</a>
        </li>
      </ul>
      <ul class="lanmu_item" v-else>
        <li v-for="(item,index) in dellist" :key="index" @click="delLanmu(item,index)">
          <a href="javascript:;">{{item.name}}</a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: ["lanmuText", "addlist", "dellist"],
  methods: {
    addLanmu(item, index) {
      this.$emit("addLanmu", item, index);
    },
    delLanmu(item, index) {
      this.$emit("delLanmu", item, index);
    }
  }
};
</script>
<style lang="less" scoped>
.lanmu {
  padding: 10px;
  p {
    font-size: 16px;
    color: #666;
  }
  .lanmu_item {
    display: flex;
    flex-wrap: wrap;
    li {
      display: flex;
      width: 25%;
      height: 9.722vw;
      line-height: 9.722vw;
      text-align: center;
      margin-bottom: 10px;
      a {
        width: 100%;
        height: 100%;
        margin: 10px;
        border: 1px solid #ccc;
        &:active {
          background-color: #ea2e03;
          color: #fff;
        }
      }
    }
  }
}
</style>
